<!--  -->
<template>
<div class='login-container'>
    <div class="login-box" :style="centerBoxSize">
        <div class="login-img">
            <img src="~img/logo.png" alt="">
        </div>

        <router-view></router-view>
    </div>
</div>
</template>

<script>

    import Login from './components/Login';
    import Register from './components/Register';
    export default {
    components: {
        Register,
        Login
    },
    data() {

        return {
            type:1,
            currentPath:''
        };
    },
    computed: {

        centerBoxSize(){

            let centerBoxWidth = 500;
            let centerBoxHeight = 350;
            // console.log(this.$route.path);
           if (this.$route.path === '/register'){
               centerBoxWidth = 580;
               centerBoxHeight  = 500;

            }
            // return "{'height':centerBoxHeight}"
            // console.log("{'height':" + centerBoxHeight + "px,'width':" + centerBoxWidth + "px}");
            return  { 'height':+centerBoxHeight+'px','width':centerBoxWidth+'px'};
        }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {

        // console.log(this.$route.path);
        // if (this.currentPath !== this.$route.path){
        //     this.currentPath = this.$route.path;
        // }
    }, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发

}
</script>
<style lang='less' scoped>

.login-container{
    width: 100%;
    height: 100%;
    background: #2b4b6b;
    .login-box{

        width: 550px;
        height: 350px;
        background: #fff;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%,-50%);
        .login-img{
            width: 130px;
            height: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #eee;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            background: #fff;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
    }
}
</style>
